<template>
  <!--播放列表-->
  <div class="player-list z-500  yu-bgColor-tew-only overflow-scroll  relative rounded-t-md" :class="store.isFlag ? 'w-1/2 h-70' : 'w-full h-70' " v-if="isPlayerList">
    <h4 class="pl-2 h-8 flex items-center justify-between m-0 sticky left-0 right-0 top-0 bottom-0 z-50 text-sm">
      <span class="flex items-center">
        <span>播放列表({{ store.privilegesTracks.length }})</span>
        <span v-if="store.token" @click="addMyPlaylist()" class="flex items-center ml-10 cursor-pointer yu-textColor-hover">
          <i class="inline-block i-mdi-content-save"/>
          <span>收藏全部</span>
        </span>
      </span>
      <span class="flex items-center">
        <span class="flex items-center cursor-pointer yu-textColor-hover mr-2" @click="clearPlaylist">
          <span class="i-mdi-delete"/>
          <span>清空</span>
        </span>
        <span class="p-2 yu-textColor-hover cursor-pointer text-xl" @click="closeORStart">x</span>
      </span>
    </h4>
    <div
        v-for="(playlist, playlistIndex) in store.playlistInfo"
        :key="playlist.id"
        :class="[store.songUrlIndex === playlistIndex ? 'yu-bgColor-two-active-only' : '', store.isFlag ? 'yu-bgColor-hover-only' : '' ]"
        class="h-8  flex items-center cursor-pointer"
    >
      <div class="w-full  p-2" :class="store.isFlag ? 'grid  grid-cols-3' : 'flex items-center justify-between'" @click="specifyPlay(playlistIndex)">
        <span class="inline-block truncate " :class="store.isFlag ? 'w-65' : 'w-50'">
          <span class="yu-textColor-hover" @click.stop="jumpPcSongDetail(playlist.id)">{{ playlist.name }}</span> -
          <span class="inline-block yu-textColor-hover text-sm" @click.stop="jumpArtistDetails(playlist.ar[0].id)">{{ playlist.ar[0].name }}</span>
        </span>
        <span v-if="store.isFlag" class="text-center">{{ timestampToSecondsMinutes(playlist.dt) }}</span>
        <span v-if="store.isFlag" class="flex text-black yu-color-text items-center justify-around" :class="store.isFlag ? 'grid  grid-cols-3 ' : 'w-1/2' ">
          <van-icon v-if="store.token && playlist.al.pic_str" class-prefix="i-mdi-pencil-plus" class="yu-textColor-hover" @click.stop="addMyPlaylist(playlist.id)"/>
          <span class=" i-mdi-download" :class="actionsStyle" @click.stop="downloadUrl(playlist)"/>
          <span class=" i-mdi-delete" :class="actionsStyle" @click.stop="removeSongUrl(playlist.id, playlistIndex)"/>
        </span>
        <div v-else class="flex items-center">
          <span class=" mr-2 i-mdi-delete" :class="actionsStyle" @click.stop="removeSongUrl(playlist.id, playlistIndex)"/>
          <span class="i-mdi-format-list-bulleted" @click.stop="actionsPopup(playlist)"></span>
        </div>
      </div>
    </div>
    <!-- 添加到播放列表 -->
    <add-playlist />
    <mobile-popup-actions
        ref="mobile_Actions"
        :song-url-info="songUrlInfo"
        :isMobileSinger="isMobileSinger"
        :isDownload="true"
        :isAddPlayList="isAddPlayList"
        @playerMusic="playMusic"
        @addMyPlaylist="addMyPlaylist"
        @downloadUrl="downloadUrl"
        :isShare="false"
        :isAddPlaylist="false"
    />
  </div>
</template>

<script setup>
import {useStore} from "@/store/index"
import { timestampToSecondsMinutes } from "@/utils/index"
import {reactive, ref, toRefs} from "vue";
// 收藏歌曲
import AddPlaylist from '@/components/AddPlaylist/index.vue'
import MobilePopupActions from '@/components/MusicList/components/MobilePopupActions/index.vue'

import {asString} from "@/utils/index";
import {useRouter} from "vue-router";

const store = useStore()
const data = reactive({
  actionsStyle: ['yu-textColor-hover'],
  songUrlInfo: {},
  isMobileSinger: false, // 是否展示歌手名称
  isAddPlayList: false // 是否展示收藏到我的歌单按钮
})
const router = useRouter()
const { actionsStyle, songUrlInfo, isMobileSinger, isAddPlayList } = toRefs(data)

const $emit = defineEmits(['specifyPlay'])

// 播放歌曲
const playMusic = (id) => {
  store.getSongDetail(id)
}

// 点击指定播放哪首歌曲，通过下标指定
const specifyPlay = (index) => {
  $emit('specifyPlay', index)
}

// 删除一首 noLyric 用来判断是否是电台
const removeSongUrl = (id, index) => {
  store.removeSongUrl(id, index)
}
// 清空播放列表
const clearPlaylist = () => {
  store.removeSongUrl()
}
const props = defineProps({
  playerList: {
    type: Array,
    default: []
  }
})
// 歌曲展示列表是否隐藏
const isPlayerList = ref(false)

const closeORStart = () => {
  isPlayerList.value = !isPlayerList.value
}
// 导出关闭开启列表弹窗事件
defineExpose({
  closeORStart
})

// 移动端操作按钮弹窗实例
const mobile_Actions = ref(null)
// 移动端操作按钮
const actionsPopup = (songUrlInfo) => {
  if (songUrlInfo.al.pic_str) {
    data.isMobileSinger = true
    data.isAddPlayList = true
  } else {
    data.isMobileSinger = false
    data.isAddPlayList = false
  }
  console.log(songUrlInfo)
  data.songUrlInfo = songUrlInfo
  // console.log(songUrl)
  mobile_Actions.value.actions = true
}

// 将歌曲添加到我的歌单
const addMyPlaylist = (id = '') => {
  store.addPlaylistPopup = true
    if (id) {
      // 存放添加歌曲的id
      store.musicId = id.toString()
    } else {
      store.musicId = asString(store.privilegesTracks)
    }
}
// 下载音乐
const downloadUrl = (songUrl) => {
  console.log(songUrl)
  // 电台下载和其他音乐下载不同
  let params
  if (store.currentInfo.type === 5) {
    params = { id: songUrl.mainSong.id, musicName: songUrl.mainSong.name, singerName: songUrl.mainSong.artists[0].name }
  } else {
    params = { id: songUrl.id, musicName: songUrl.name, singerName: songUrl.ar[0].name }
  }

  store.getSongDownloadUrl(params)
}

// 跳转到歌手详情
const jumpArtistDetails = (id) => {
  router.push({
    path: '/artist',
    query: {
      id
    }
  })
}

// 点击播放器档期歌曲name跳转到详情
const jumpPcSongDetail = (id) => {
  router.push({
    path: '/pc-song-detail',
    query: {
      id
    }
  })
}
</script>

<style scoped lang="scss">
.yu-bgColor-two-active-only {
  background-color: v-bind('store.theme.HoverBgColor');
}

// hover字体颜色
.yu-textColor-hover {
  &:hover {
    color: v-bind('store.theme.hoverTextColor')!important;
  }
}
// 只是hover背景
.yu-bgColor-hover-only {
  &:hover {
    background-color: v-bind('store.theme.HoverBgColor');
  }
}

</style>
